<template>
  <div>
    <!--编写页面静态部分,即view部分-->
    <el-form :model="pageForm" status-icon :rules="formRules" ref="pageForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="所属站点" prop="siteId">
        <el-select v-model="pageForm.siteId" placeholder="请选择站点">
          <el-option label="区域一" value="5a751fab6abb5044e0d19ea1"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择模板" prop="templateId">
        <el-select v-model="pageForm.templateId" placeholder="请选择">
          <el-option
            v-for="item in templateOptions"
            :key="item.templateId"
            :label="item.templateName"
            :value="item.templateId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="页面名称" prop="pageName">
        <el-input v-model="pageForm.pageName"></el-input>
      </el-form-item>
      <el-form-item label="别名" prop="pageAliase">
        <el-input v-model="pageForm.pageAliase"></el-input>
      </el-form-item>
      <el-form-item label="访问路径" prop="pageWebPath">
        <el-input v-model="pageForm.pageWebPath"></el-input>
      </el-form-item>
      <el-form-item label="物理路径" prop="pagePhysicalPath">
        <el-input v-model="pageForm.pagePhysicalPath"></el-input>
      </el-form-item>
      <el-form-item label="类型">
        <el-radio-group v-model="pageForm.pageType" size="small">
          <el-radio label="1" class="radio" border>静态</el-radio>
          <el-radio label="2" class="radio" border>动态</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker type="datetime" placeholder="创建时间" v-model="pageForm.pageCreateTime"></el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog‐footer">
        <el-button type="primary" class="el-icon-back" style="width:100px" @click="go_back">返回</el-button>
      <el-button type="primary" style="width:100px"  @click="submitForm()">提交</el-button>
    </div>
  </div>

</template>
<script>
  /*编写页面静态部分,即model及vm部分.*/
  import * as cmsApi from '../api/cms'
  export default {
    data() {
      return {
        pageForm:{
          siteId:"",
          templateId:"",
          pageName:"",
          pageAliase:"",
          pageWebPath:"",
          pagePhysicalPath:"",
          pageType:"",
          pageCreateTime:"",
        },
        templateOptions:[],
        formRules:{
          siteId:[
            {required:true,message:'请选择站点',tigger:'blur'}
          ],
          templateId:[
            {required:true,message:'请选择模板',tigger:'blur'}
          ],
          pageName:[
            {required:true,message:'请填写页面名称',tigger:'blur'}
          ]
        }
      }
    },
    methods: {
      //获取模板列表
      templateList(){
        cmsApi.template_list().then((res)=>{
          this.templateOptions=res.queryResult.list;
        })
      },
      //返回上级菜单
      go_back(){
        this.$router.push({
          path:'/cms/page/list',
          query:{
            page:this.$route.query.page,
            size:this.$route.query.size
          }
        })
      },
      //提交表单
      submitForm(){
        this.$refs.pageForm.validate((valid)=>{
          if(valid){
            this.$confirm('确认提交吗?','提示',{
              confirmButtonText:'确认',
              cancelButtonText:'取消',
              type:'info'
            }).then(()=>{
                cmsApi.page_add(this.pageForm).then((res)=>{
                    if(res.success){
                      this.$message({
                        message:'提交成功',
                        type:'success'
                      });
                      this.$refs['pageForm'].resetFields();
                    }else if(res.message){
                      this.$message.error(res.message);
                    }else{
                      this.$message.error('提交失败')
                    }
                })
            })
            
          }else{
            alert('校验失败');
            return false;
          }
        })
      }
      
    },
    mounted(){
      this.templateList();
    }
  }
</script>
<style>
  /*编写页面样式,不是必须*/
</style>
